<template>
  <view class="my-content takepart" v-if="loading">
    <view v-if="show" :class="[asideHeight()]" class="appraise">
      <view class="head">
        <view class="photo">
          <u-avatar :size="100" :src="avatar"></u-avatar>
          <text>{{ username }}</text>
          <image v-for="(item, index) in image" :key="index" :src="item.url" class="img" mode=""></image>
          <view style="margin-left: auto;padding-right: 20px;color: rgb(247 155 40);text-align: center;">{{ $t('发布方评价') }}</view>
        </view>
        <text class="text">{{ time('S', order_info.createtime, '-').split(' ')[0] }}</text>
        <p>{{ order_info[$t('item.content')] }}</p>
        <view v-for="(item, index) in cargo" :key="index" class="cargo" v-if="cargo.length < 1">
          <image :src="item" class="_cargo" mode=""></image>
        </view>
      </view>

      <view class="center">
        <p>{{ $t('订单编号') }}:
          <text class="text-1">{{ order_info.order_no }}</text>
        </p>
        <!-- <p>{{ $t('订单信息') }}:
          {{ order_info[$t('item.show_text')] }}
        </p> -->
        <p>
          <text class="text-2">{{ $t('综合评价') }}:</text>
          <u-rate :current="order_info.total_score" :disabled="true" active-color="#F79B29" gutter="27"
            inactive-color="#E2E2E2" size="40"></u-rate>
        </p>
      </view>

     
	  
	  <view class="fuwu" >
	    <view class="_fw" style="margin-left: 35rpx;">
	      <table >{{ $t('服务态度') }}:</table>
	      <table style="margin-top: 5rpx;">{{ $t('产品质量') }}:</table>
<!-- 	      <table >{{ $t('产品价格') }}:</table> -->
		  <table style="margin-top: 5rpx;">{{ $t('发货速度') }}:</table>
		  <table style="margin-top: 5rpx;">{{ $t('诚信度') }}:</table>
	    </view>
	    <view class="_xing">
	      <u-rate v-for="(keys, i) in star" :key="i" :current="keys" :disabled="true" active-color="#F79B29" gutter="27"
	        inactive-color="#E2E2E2" size="40"></u-rate>
	    </view>
	  </view>
	  
	  
    </view>

    <view v-if="show2" :class="[asideHeight()]" class="appraise" style="margin-top: 20rpx;">
      <view class="head">
        <view class="photo">
          <u-avatar :size="100" :src="avatar2"></u-avatar>
          <text style="max-width: 176rpx;word-wrap: break-word;">{{ username2 }}</text>
          <image v-for="(item, index) in image2" :key="index" :src="item.url" class="img" mode=""></image>
          <view style="margin-left: auto;padding-right: 20px;color: #2b85e4;text-align: center;">{{ $t('参与方评价') }}</view>
        </view>
        <text class="text">{{ time('S', order_info2.createtime, '-').split(' ')[0] }}</text>
        <p>{{ order_info2[$t('item.content')] }}</p>
        <view v-for="(item, index) in cargo2" :key="index" class="cargo" v-if="cargo.length < 1">
          <image :src="item" class="_cargo" mode=""></image>
        </view>
      </view>
      <view class="star" style="margin-left: 35rpx; margin-top: 20rpx;">
        <p>
        <table>{{ $t('订单编号') }}:</table>
        <text>{{ order_info2.order_no }}</text>
        </p>
       
        <view class="fuwu">
          <view class="_fw" style="margin-left: 0rpx;">
            <table >{{ $t('综合评价') }}:</table>
            <table style="margin-top: 5rpx;">{{ $t('服务态度') }}:</table>
            <table style="margin-top: 5rpx;">{{ $t('诚信度') }}:</table>
<!-- 			<table >{{ $t('付款速度') }}:</table> -->
          </view>
          <view class="_xing">
            <u-rate v-for="(keys, i) in xin2" :key="i" :current="keys" :disabled="true" active-color="#F79B29" gutter="27"
              inactive-color="#E2E2E2" size="30"></u-rate>
          </view>
        </view>
      </view>
    </view>
	
	
	<view v-if="show==false">
		<view v-if="show2==false">
			<u-empty  mode="list" margin-top="200"></u-empty>
		</view>
	</view>
	
	

  </view>
</template>

<script>
import { IMAGE_URL } from "@/config/app"
import { time } from "@/common/public"

export default {
  data() {
    return {
      username: '',
      avatar: '',
      order_info: {},
      username2: '',
      avatar2: '',
      order_info2: {},
      // 判断显示那个评价
      type: null,
      // 头像旁边的标签
      image: [],
      image2: [],
      //货物图片
      cargo: [],
      cargo2: [],
      star: [],
      xin: {},
      star2: [],
      xin2: {},
      show: false,
      show2: false,
      loading: false
    }
  },
  onLoad(options) {
    this.type = options.type
    // this.type = 'join'
    this.order = Number(options.order_id)
    this.$u.api.order.getRateDetail({ order_id: options.order_id, type: this.type }).then(resData => {
      let res = null
      let res2 = null
      if (resData.length > 0) {
        for (let i in resData) {
          if (resData[i].type === '1') {// 发布方评价
            res = resData[i]
          }
          if (resData[i].type === '2') {// 参与方评价
            res2 = resData[i]
          }
        }
      }
      console.log('res', res)
      console.log('res2', res2)
      if (res !== null) {
        res.images.forEach((element, index) => {
          res.images[index] = IMAGE_URL + res.images[index]
        });
        this.image = res.from_user.label
        this.image.forEach((ele) => {
          ele.url = IMAGE_URL + ele.url
        })
        res.from_user.avatar = IMAGE_URL + res.from_user.avatar
        this.avatar = res.from_user.avatar
        this.cargo = res.images
        this.username = res.from_user[this.$t('item.username')]
        this.order_info = res
        this.star.push(this.order_info.service_score, this.order_info.product_score, this.order_info.goods_speed_score, this.order_info.integrity_score)
        this.xin.total_score = this.order_info.total_score
        this.xin.service_score = this.order_info.service_score
        this.xin.integrity_score = this.order_info.integrity_score
        //this.xin.pay_speed_score = this.order_info.pay_speed_score

        this.show = true
      }

      if (res2 !== null) {
        res2.images.forEach((element, index) => {
          res2.images[index] = IMAGE_URL + res2.images[index]
        });
        this.image2 = res2.from_user.label
        this.image2.forEach((ele) => {
          ele.url = IMAGE_URL + ele.url
        })
        res2.from_user.avatar = IMAGE_URL + res2.from_user.avatar
        this.avatar2 = res2.from_user.avatar
        this.cargo2 = res2.images
        this.username2 = res2.from_user[this.$t('item.username')]
        this.order_info2 = res2
        this.star2.push(this.order_info2.service_score, this.order_info2.product_score, this.order_info2.goods_speed_score, this.order_info2.integrity_score)
        this.xin2.total_score = this.order_info2.total_score
        this.xin2.service_score = this.order_info2.service_score
        this.xin2.integrity_score = this.order_info2.integrity_score
		//this.xin2.pay_speed_score = this.order_info2.pay_speed_score
		
		console.log(this.xin2)
        this.show2 = true
      }
      this.loading = true
    })

  },
  onReady() {
    uni.setNavigationBarTitle({
      title: this.$t("评价")
    })
  },
  methods: {
    time,
    asideHeight() {
      return this.type == "release" ? '__appraise' : '_appraise'
    }
  },
}
</script>

<style lang="scss">
uni-page-body {
  height: 100%;
}

.takepart {
  background: #F9F9F9;
  padding: 33rpx 19rpx 26rpx 20rpx;
  overflow: scroll;
}

.appraise {
  width: 100%;
  background: #FFFFFF;
  box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(230, 230, 230, 0.5);
  display: flex;
  flex-direction: column;
}

._appraise {
  min-height: 520rpx;
}

.__appraise {
  height: 1038rpx;
}

.head {
  min-height: 209rpx;
  border-bottom: 2rpx solid #E7E7E7;
  box-sizing: border-box;
  padding: 34rpx 0 29rpx 37rpx;
  font-size: 21rpx;
  font-weight: 400;
  line-height: 30rpx;

  .text {
    color: #787878;
    font-size: 28rpx;
  }

  p {
    font-size: 28rpx;
    color: #353535;
    margin-top: 8rpx;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .photo {
    display: flex;
    margin-bottom: 13rpx;
    align-items: center;

    text {
      color: #000000;
      margin-left: 26rpx;
      font-size: 28rpx;
    }

    .img {
      width: 70rpx;
      height: 70rpx;
      margin-left: 15rpx;
    }
  }

  .cargo {
    margin-top: 26rpx;
    overflow: hidden;
    height: 129rpx;

    ._cargo {
      width: 125rpx;
      height: 129rpx;
      margin-right: 7rpx;
    }
  }
}

.center {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 177rpx;
  border-bottom: 2rpx solid #E7E7E7;
  box-sizing: border-box;
  padding: 29rpx 0 20rpx 37rpx;
  font-size: 28rpx;

  font-weight: 400;
  color: #000000;
  line-height: 30rpx;

  p {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .text-1 {
    margin-left: 20rpx;
  }

  .text-2 {
    /* #ifndef MP-WEIXIN */
    // margin-right: 35rpx;
    /* #endif */
    /* #ifdef MP-WEIXIN*/
    // margin-right: 52rpx;
    /* #endif*/
  }
}

.foot {
  display: flex;
  // flex-direction: column;
  flex: 1;
  padding: 33rpx 0 24rpx 37rpx;
  font-size: 28rpx;

  .fw {
    table {
      display: inline;
    }

    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  ._fw{
    max-width: 334rpx;
  }
  ._star {
    // margin-left: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}

.star {
  min-height: 306rpx;
  padding: 0rpx;
  display: flex;
  flex-direction: column;
  // justify-content: space-between;

  font-size: 28rpx;
  font-weight: 400;
  color: #000000;
  line-height: 30rpx;

  table {
    display: inline-block;
  }

  text {
    margin-left: 20rpx;
  }

  p {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  p:nth-child(1) {
    margin-bottom: 13rpx;
  }
}

.fuwu {
  display: flex;
  flex: 1;
  // height: 122rpx;
  margin-top: 20rpx;
  font-size: 28rpx;

  ._fw {
    max-width: 240rpx;
    display: flex;
    flex-direction: column;
  }
  table{
    margin-bottom: 0rpx;
  }
  ._xing {
    margin-left: 0rpx;
    display: flex;
    flex-direction: column;
  }
}</style>
